<template>
  <!-- 购买素材 -->
  <div class="buy-mater flex-align">
    <div class="mater-price">
      ¥
      <span class="num-font">{{ mater.grantInfos && mater.grantInfos.yearPrice }}</span>
      元起
    </div>
    <div class="buy-action flex-align">
      <a>购买须知</a>
      <button class="light-btn">购买</button>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      mater: {
        type: Object,
      },
    },
    data() {
      return {};
    },
    methods: {},
  };
</script>
<style lang="less">
  .buy-mater {
    width: 67rem;
    height: 10.7rem;
    background: #1b1b1b;
    border-radius: 1.7rem;
    padding: 2rem 4rem;
    margin: 4rem auto;
    justify-content: space-between;
    .mater-price {
      font-size: 2.8rem;
      font-weight: 400;
      color: #ffc600;
      .num-font {
        font-size: 4rem;
      }
    }
    .buy-action {
      a {
        font-size: 2.4rem;
        text-decoration: underline;
        color: var(--textBrightColor);
        margin-right: 3.5rem;
      }
    }
  }
</style>
